/*
* @Author: Yejing
* @Date: 2023-06-09 16:30:04
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:34:07
* @Description: 视频页面
*/
<template>
    <view class="video-page">
        <c-navigation-bar :bgColor='true' :title="$t('storeOfInterest.like')"
                navType='search'
                :disabled='false'  :navPlaceholder='search.navPlaceholder' :navThmen='search.navThmen'
                @searchEvent='searchEvent'>
        </c-navigation-bar>
        <view class="container-box">
            <view v-for="(card,index) in videoList" :key="index">
                <videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url)}" @videoInfo='videoInfo(index)'></videoCard>
            </view>
        </view>
        <!--        <divider v-show="total==videoList.length"></divider>-->
        <!-- 视频弹框 -->
        <u-popup v-model="videoShow" mode="center">
            <video :id="video.id"
                   :src="$u.file.getMedieUrl(video.url)"
                   enable-danmu danmu-btn controls></video>
        </u-popup>
    </view>
</template>

<script>
import videoCard from "../../../videoCard/videoCard.vue"

export default {
    components: {
        videoCard
    },
    data() {
        return {
            videoList: [],
            search: {
                navThmen: 'line',
                navPlaceholder: 'Donate for',
            },
            followUrlData: {},
            pagingObj: {
                pageSize: 20,
                pageNum: 1
            },
            total: 0,
            videoShow: false,
            video: {
                id: '',
                url: ''
            }
        };
    },
    onLoad(val) {
        this.followUrlData = val
        if (this.followUrlData.type) {
            this.getList(this.followUrlData.type, this.pagingObj)
        }
    },
    methods: {
        //搜索
        searchEvent(val) {

        },
        getList(type, pagingObj) {
            this.$u.post('/app/short/user/page/' + type, pagingObj).then(res => {
                this.videoList = [...this.videoList, ...res.data.records]
                this.total = res.data.total
            })
        },
        videoInfo(index) {
			this.$u.vuex('vuex_video_record',{list:this.videoList,index:index,show:true})
			uni.navigateTo({
           		url:"/pages/public/recordVideo/recordVideo",
           		"animationType": "slide-in-right",
           		"animationDuration": 300
           	})
        }
    }
}
</script>

<style lang="scss">
.video-page {
  .container-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &:after {
      content: '';
      width: 30%;
      height: 0;
      visibility: hidden;
    }
  }
}

</style>
